<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="site" :placeholder="$t('message.select')">
            <el-option
              v-for="(item, idx) in siteList"
              :key="idx"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" :placeholder="$t('message.select')">
            <el-option
              v-for="(item, idx) in coinType"
              :key="idx"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="to"
            :start-placeholder="$t('start-time')"
            :end-placeholder="$t('end-time')">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="commitData">{{$t('message.confirm')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="totalVisible">{{$t('message.tot')}}</el-checkbox>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="toolbar" style="padding: 0;">
      <table v-if="totalVisible" class="detailTable detailTable2" border="1" >
        <tr>
          <td>{{$t('message.bid-free')}}</td>
          <td>
            {{tot.base_deal_fees}}
          </td>
          <td>{{$t('message.ask-free')}}</td>
          <td>
            {{tot.quote_deal_fees}}
          </td>
          <td>{{$t('message.execute-vol')}}</td>
          <td>
            {{tot.total_amount}}
          </td>
        </tr>
        <tr>
          <td>{{$t('message.vol-change')}}</td>
          <td>
            {{tot.total_amount_change}}
          </td>
          <td>{{$t('message.exe-amount')}}</td>
          <td>
            {{tot.total_money}}
          </td>
          <td>{{$t('message.amount-change')}}</td>
          <td>
            {{tot.total_money_change}}
          </td>
        </tr>
        <tr>
          <td>{{`${$t('message.total-buy-pl')}(${tot.buy_pl_unit})`}}</td>
          <td>
            {{tot.total_buy_pl}}
          </td>
          <td>{{`${$t('message.total-sell-pl')}(${tot.sell_pl_unit})`}}</td>
          <td>
            {{tot.total_sell_pl}}
          </td>
          <td>{{`${$t('message.total-pl')}(${tot.pl_unit})`}}</td>
          <td>
            {{tot.total_pl}}
          </td>
        </tr>
      </table>
    </el-col>
    <!--列表-->
    <el-table
      v-if="!totalVisible"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="order_id"
        :label="$t('message.order-id')">
      </el-table-column>
      <el-table-column
        prop="symbol"
        :label="$t('message.hedge-pair')">
      </el-table-column>
      <el-table-column
        prop="self_symbol"
        :label="$t('message.site-pairs')">
      </el-table-column>
      <el-table-column
        prop="type"
        :label="$t('message.type')">
        <template slot-scope="scope">
          <span>
            {{scope.row.type.split('-')[0] === 'buy' ? $t('message.buy') : (scope.row.type.split('-')[0] === 'sell' ? $t('message.sale') : '')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="self_price"
        :label="$t('message.site_price')">
      </el-table-column>
      <el-table-column
        prop="price"
        :label="$t('message.hedge_price')">
      </el-table-column>
      <el-table-column
        prop="deal_amount"
        :label="$t('message.volume')">
      </el-table-column>
      <el-table-column
        prop="deal_fees"
        :label="$t('message.handling-fee')">
      </el-table-column>
      <el-table-column
        prop="total"
        :label="$t('message.total')">
      </el-table-column>
      <el-table-column
        prop="base_pl"
        :label="$t('message.base_pl')">
      </el-table-column>
      <el-table-column
        prop="pl"
        :label="$t('message.PL')">
      </el-table-column>
      <el-table-column
        prop="created_at"
        :label="$t('message.time')">
        <template slot-scope="scope">
          <span>{{changeTime(scope.row.created_at)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="!totalVisible">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="currentPage"
          :total="pageSize">
        </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import { HuobiRecode, hedgingSymbolList, hedgingSiteList } from '../api/api'
// import { timestampToTime } from '../common/js/util'

export default {
  data () {
    return {
      date: '',
      coinType: [],
      siteList: [],
      site: '',
      value: '',
      tableData: [],
      pageSize: 1,
      tot: {},
      totalVisible: false
    }
  },
  beforeCreate () {
  },
  created () {
    hedgingSiteList().then((res) => {
      console.log(res)
      if (res.data.code && res.data.code !== 0) {
        this.$message.error(this.$t('message.tip-33'))
      }
      this.siteList = res.data.result
    }).catch((res) => {
      console.log(res)
    })
  },
  watch: {
    site (n) {
      hedgingSymbolList({site: n}).then((res) => {
        if (res.data.code && res.data.code !== 0) {
          this.$message.error(this.$t('message.tip-33'))
        }
        this.coinType = res.data.result
      }).catch((res) => {
        console.log(res)
      })
    }
  },
  methods: {
    getData (site, symbol, pageNum, startTime, endTime) {
      let param = { site: site, symbol: symbol, pageNum: pageNum, startTime: startTime, endTime: endTime }
      HuobiRecode(param).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.tableData = res.data.results
          this.pageSize = res.data.totalLength
          this.tot = res.data.total
          // if (Math.ceil(this.pageSize / 10) === pageNum) {
          //   let totalArr = {
          //     id: '',
          //     user_id: '',
          //     trade_id: '',
          //     symbol: '',
          //     self_symbol: '',
          //     type: '',
          //     price: this.$t('message.tot'),
          //     self_price: '',
          //     deal_amount: res.data.total.total_amount_change,
          //     deal_fees: res.data.total.total_deal_fees,
          //     created_at: '',
          //     total: res.data.total.total_money,
          //     pl: res.data.total.total_pl
          //   }
          //   this.tableData.push(totalArr)
          // }
        } else {
          this.$message.error(this.$t('message.tip-34'))
        }
      }).catch(() => {
        this.$message.error(this.$t('message.tip-34'))
      })
    },
    commitData () {
      let symbol = this.value
      let date = this.date
      console.log(symbol)
      console.log(date)
      if (symbol === '' && date === '') {
        this.$message.error(this.$t('message.tip-15'))
      } else {
        this.getData(this.site, symbol, 1, date[0].getTime(), date[1].getTime())
      }
    },
    currentPage (page) {
      this.getData(this.site, this.value, page, this.date[0].getTime(), this.date[1].getTime())
    },
    change (t) {
      if (t < 10) {
        return '0' + t
      } else {
        return t
      }
    },
    changeTime (timeStamp) {
      if (timeStamp === '') {
        return ''
      }
      let date = new Date(Number(timeStamp)) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = this.change(date.getDate()) + ' '
      let h = this.change(date.getHours()) + ':'
      let m = this.change(date.getMinutes()) + ':'
      let s = this.change(date.getSeconds())
      return Y + M + D + h + m + s
    }
  },
  computed: {
    totalData () {
      return this.tot.length > 0
    }
  }
}

</script>

<style scoped lang="scss">
  .pagination {
    overflow: hidden;
    margin-top: 20px;
    div {
      float: right;
      width: 400px;
    }
  }
  .detailTable {
    width: 100%;
    tr {
      td:nth-child(2), td:nth-child(4), td:nth-child(6) {
        width: 20%;
        background: #fff;
      }
    }
  }
  .noData {
    text-align: center;
    color: #888;
  }
</style>
